<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>采购进库</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
    .layui-textarea{
        width: 50% !important;
    }
    .fenge{
        border-color: rgba(3, 51, 51, 0.25) !important;
    }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title fenge" style="margin-top: 20px;">
    <legend>采购进库</legend>
</fieldset>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">货物编号</label>
            <div class="layui-input-inline">
                <input type="text" name="commodity" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">货物类型</label>
            <div class="layui-input-inline">
                <select name="species" lay-verify="required" >
                    <option value="">点击进行选择</option>
                    <option value="CPU">CPU</option>
                    <option value="主板">主板</option>
                    <option value="显卡">显卡</option>
                    <option value="内存">内存</option>
                    <option value="固态硬盘">固态硬盘</option>
                    <option value="机械硬盘">机械硬盘</option>
                    <option value="散热器">散热器</option>
                    <option value="散热风扇">散热风扇</option>
                    <option value="电源">电源</option>
                    <option value="机箱">机箱</option>
                    <option value="显示器">显示器</option>
                    <option value="键盘">键盘</option>
                    <option value="鼠标">鼠标</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"> 品 牌 </label>
            <div class="layui-input-inline">
                <select name="brand" lay-verify="required" >
                    <option value="">点击进行选择</option>
                    <option value="华硕（ASUS)">华硕（ASUS）</option>
                    <option value="微星（MSI)">微星（MSI）</option>
                    <option value="技嘉（GIGABYTE）">技嘉（GIGABYTE）</option>
                    <option value="七彩虹（Colorful）">七彩虹（Colorful）</option>
                    <option value="英特尔（Intel）">英特尔（Intel）</option>
                    <option value="铭瑄（MAXSUN）">铭瑄（MAXSUN）</option>
                    <option value="影驰（Galaxy）">影驰（Galaxy）</option>
                    <option value="金士顿 (Kingston)">金士顿(Kingston)</option>
                    <option value="三星（SAMSUNG）">三星（SAMSUNG）</option>
                    <option value="西部数据（Western Digital）">西部数据（Western Digital）</option>
                    <option value="联想（Lenovo)">联想（Lenovo) </option>
                    <option value="光威（Gloway）">光威（Gloway）</option>
                    <option value="先马（SAMA）">先马（SAMA）</option>
                    <option value="长城（Great Wall）">长城（Great Wall）</option>
                    <option value="罗技（G）">罗技（G）</option>
                    <option value="其他">其他</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">货物名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">规格</label>
            <div class="layui-input-inline">
                <select name="specifications" lay-verify="required" >
                    <option value="全新">全新</option>
                    <option value="9成新">9成新</option>
                    <option value="女生自用99新">女生自用99新</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">供应商</label>
            <div class="layui-input-inline">
                <input type="text" name="supplier" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">选择仓库</label>
            <div class="layui-input-inline">
                <select name="warehouse" lay-verify="required" >
                    <option value="">点击进行选择</option>
                    <option value="A仓库">A仓库</option>
                    <option value="B仓库">B仓库</option>
                    <option value="C仓库">C仓库</option>
                    <option value="商店">商店</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">入库日期</label>
            <div class="layui-input-inline">
                <input type="text" name="time" id="time" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">入库数量</label>
            <div class="layui-input-inline">
                <input type="tel" name="quantity" lay-verify="required|number" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input type="tel" name="sal" lay-verify="required|number" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"> 负责人</label>
            <div class="layui-input-inline">
                <input type="text" name="people" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label"> 备 注 </label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="record"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="btn-submit-filter" id="btn-submit">马上入库</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
<fieldset class="layui-elem-field layui-field-title fenge" style="margin-top: 20px;">
    <legend>入库记录</legend>
</fieldset>
<table id="table-goods" lay-filter="table-goods-filter"></table>


<script type="text/html" id="col-goods-toolbar">

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<script type="text/html" id="toolbarDemo">

</script>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
    var ctxPath = [[@{/}]];
    // 表单
    layui.use(['form', 'laydate','table'], function(){
        var form = layui.form
            ,layer = layui.layer
        ,table = layui.table
            ,laydate = layui.laydate;
        var $ = layui.$;

        //日期
        laydate.render({
            elem: '#time'
        });
        //表单提交

        form.on('submit(btn-submit-filter)', function(data){
            // 将登录按钮置灰
            $("#btn-submit").attr("disabled","disabled").addClass("layui-btn-disabled");
            console.log(data.field);
            // 异步请求提交数据

            var url = ctxPath + "goods";
            $.post(url,data.field,function (response){

                if (response.code == 0){

                    //成功提示
                    layer.msg(response.message, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        // 刷新表格
                        setTimeout('window.location.reload()',0);
                    });

                    //刷新表格
                }else{
                    $("#btn-submit").removeAttr("disabled","disabled").removeClass("layui-btn-disabled");

                    //失败

                    layer.msg("入库失败，请联系管理员", {
                        icon: 2,
                        anim: 6,

                    });
                    // 将登录按钮取消置灰,恢复可用
                }

            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

            //员工列表表格渲染
            table.render({
                elem: '#table-goods'
                , url: ctxPath + 'goods/list' //数据接口
                , page: true //开启分页
                , height: 'full-300'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , limits: [10, 20, 30, 50, 100]
                , limit: 10
                , cols: [[ //表头
                    {field: 'commodity', title: '货物编号', align: 'center'}
                    , {field: 'species', title: '货物类型', align: 'center'}
                    , {field: 'brand', title: '货物品牌', align: 'center'}
                    , {field: 'name', title: '货物名称', align: 'center'}
                    , {field: 'specifications', title: '规格', align: 'center'}
                    , {field: 'supplier', title: '供应商', align: 'center'}
                    , {field: 'warehouse', title: '存放仓库', align: 'center'}
                    , {field: 'time', title: '入库日期', align: 'center', sort: true}
                    , {field: 'quantity', title: '数量', align: 'center', sort: true}
                    , {field: 'sal', title: '价格', align: 'center', sort: true}
                    , {field: 'people', title: '负责人', align: 'center'}
                    , {field: 'record', title: '备注', align: 'center'}
                    , {title: '操作', width: 150, toolbar: '#col-goods-toolbar', align: 'center'}
                ]]
            });

        // 监听操作列
        table.on('tool(table-goods-filter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent == 'del') {
                layer.confirm('您确认删除?: ' + data.name + " ? ", {icon: 3, title: '删除确认'}, function (index) {
                    // 异步请求删除数据,结果提示，刷新表格

                    let url = ctxPath + "goods/" + data.commodity;
                    var params = {
                        _method: "DELETE"
                    }


                    $.post(url, params, function (response) {

                        if (response.code == 0) {
                            layer.msg(response.message, {icon: 1});
                            // 刷新表格
                            setTimeout('window.location.reload()',0);
                            refreshTable();
                        } else {
                            layer.alert(response.message, {icon: 2, anim: 6});
                        }

                    });

                    layer.close(index);
                });


            } else if (layEvent == 'edit') {
                layer.open({
                    type: 2,
                    title: "修改商品信息",
                    area: ['100%', '100%'],
                    shadeClose: false,

                    content: ctxPath + 'goods/' + data.commodity
                });

            }


        });

    });




</script>
</body>
</html>